<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scable=no,maximum=1.0,minimum=1.0">
    <title>苏宁易购首页</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <header>
        <!-- 搜索部分 -->
        <div class="flex-box">
            <a href="#"></a>
            <div class="search-input">
                <span class="search-icon"></span>
                <form action="#">
                    <input type="text" value="双12预售 定金10倍翻">
                </form>
            </div>
            <a href="#"></a>
        </div>
        <div class="swipper">
            <img src="./images/swiper.jpg" alt="">
        </div>
    </header>
    <div class="middle-linear">
        <div class="gif-img">
            <img src="./images/nav-img.gif" alt="">
        </div>
        <div class="nav-three-img">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="nav-tab">
        <div class="nav-items">
            <a href="#" class="items">
                <img src="./images/nav-img1.png" alt="">
                <p>苏宁秒杀</p>
            </a>
            <a href="#" class="items">
                <img src="./images/nav-img2.png" alt="">
                <p>苏宁超市</p>
            </a>
            <a href="#" class="items">
                <img src="./images/nav-img3.png" alt="">
                <p>苏宁拼购</p>
            </a>
            <a href="#" class="items">
                <img src="./images/nav-img4.png" alt="">
                <p>手机数码</p>
            </a>
            <a href="#" class="items">
                <img src="./images/nav-img5.png" alt="">
                <p>苏宁家电</p>
            </a>
            <a href="#" class="items">
                <img src="./images/nav-img6.png" alt="">
                <p>免费水果</p>
            </a>
            <a href="#" class="items">
                <img src="./images/nav-img7.png" alt="">
                <p>赚钱消消乐</p>
            </a>
            <a href="#" class="items">
                <img src="./images/nav-img8.png" alt="">
                <p>签到有礼</p>
            </a>
            <a href="#" class="items">
                <img src="./images/nav-img9.png" alt="">
                <p>领卷中心</p>
            </a>
            <a href="#" class="items">
                <img src="./images/nav-img10.png" alt="">
                <p>更多频道</p>
            </a>

        </div>
    </div>
    <div class="news-tab">
        <a href="#">
            <div></div>
        </a>
        <a href="#">
            <div></div>
        </a>
        <a href="#">
            <div></div>
        </a>
    </div>
    <div class="recommend">
        <div class="recom-top">
            <div class="top-items border-right">
                <h3>天天低价</h3>
                <p>人气好货限时抢</p>
                <div class="top-img">
                    <div>
                        <img src="./images/recommend-img1.jpg" alt="">
                        <p>￥8.9</p>
                    </div>
                    <div>
                        <img src="./images/recommend-img2.jpg" alt="">
                        <p>￥8.9</p>
                    </div>
                </div>
            </div>
            <div class="top-items">
                <h3>苏宁秒杀</h3>
                <p>品质好货天天秒 </p>
                <div class="top-img">
                    <div>
                        <img src="./images/recommend-img3.webp" alt="">
                        <span>汇尔康(HR)</span>
                    </div>
                    <div>
                        <img src="./images/recommend-img4.webp" alt="">
                        <span>纤净</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="recom-bottom">
            <div class="left-tilte">
                <a href="#">
                    <h2>为您推荐</h2>
                    <p>精选频道</p>
                </a>
            </div>
            <div class="four-space">
                <div>
                    <a href="#">
                        <img src="./images/recommend-img5.webp" alt="">
                        <span>苏宁国际</span>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <img src="./images/recommend-img3.webp" alt="">
                        <span>苏宁Outlets</span>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <img src="./images/recommend-img5.webp" alt="">
                        <span>苏宁国际</span>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <img src="./images/recommend-img3.webp" alt="">
                        <span>苏宁Outlets</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <div class="nav-bottom">
            <ul>
                <li>
                    <a href="#">
                        <img src="./images/tab-img1.png" alt="">
                        <p>猜你喜欢</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/tab-img2.png" alt="">
                        <p>分类</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/tab-img3.png" alt="">
                        <p>排行旁</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/tab-img4.png" alt="">
                        <p>购物车</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/tab-img5.png" alt="">
                        <p>我的易购</p>
                    </a>
                </li>
            </ul>
        </div>
    </footer>
</body>

</html>